
<script type="text/javascript">

</script>
<style media="screen">
  .cust{
    width: 40% !important;
    float: left!important;
  }
</style>

<br>
<div class="ui  container">
  <div class="ui segment">
    <div class="ui huge header">
      <%= @manage_title %>
    </div>
    <form class="" action="/webadmin/order/deleteorderss" method="post">
      <div class="ui buttons">
        <!-- <a href="/system/orders/new" class="ui green basic button">增加</a> -->
        <button type="submit" class="ui basic red button">批量删除</button>
        <input type="hidden" name="ids" value="" id="orders_delete">
      </div>
    </form>
  </div>
  <div class="ui load segment">
    <div class="ui dimmer">
    <div class="content">
      <div class="center">
        <h2 class="ui inverted icon header">
          <i class="progress icon"></i>
          <span id="loadMessage">正在保存更改......<span>
        </h2>
      </div>
    </div>
  </div>
  <div class="ui container">


    <table class="ui twelve column celled table">
      <thead>
        <tr>
        <th>
          全选／反选 <br>
          <div class="ui master checkbox">
            <input type="checkbox">
            <label for=""></label>
          </div>
        </th>
        <th>编号</th>
        <th>负责的销售人员电话</th>
        <th>负责的销售人员昵称</th>
        <th>负责的销售人员姓名</th>
        <th>购买的商品</th>
        <th>下单时间</th>
        <th>订单状态</th>
        <th>客户电话</th>
        <th>状态更新时间</th>
        <th>交易成交总额</th>
      </tr></thead>
      <tbody>
        <% if @orders.length > 0 and @orders %>
        <% @orders.each do |order| %>
        <tr>
          <td style="word-break:break-all;">
            <div class="ui child checkbox" orderid="<%= order.id %>">
              <input type="checkbox" tabindex="0">
              <label for=""></label>
            </div>
          </td>
          <td style="word-break:break-all;"><%= order.id %></td>
          <% @seller = User.find(order.seller) %>
          <td style="word-break:break-all;"><%= @seller.mobile %></td>
          <td style="word-break:break-all;"><%= @seller.fake_name %></td>
          <td style="word-break:break-all;"><%= @seller.real_name %></td>
          <td style="word-break:break-all;">
            <ul>
              <% order.order_products.each do |order_product| %>
                <% if order_product.product %>
                <li><a href="/products/<%= order_product.product.id %>">
                <%= order_product.product.product_model_type %></a>　&times;
                 <%= order_product.counter %></li>
                 <% else %>
                    <li>该商品已经下架</li>
                 <% end %>
              <% end %>
            </ul>
          </td>
          <td style="word-break:break-all;"><%= order.created_at.strftime("%Y-%m-%d %H:%M:%S") %></td>
          <td style="width:200px;">
            <select  id="status<%=order.id.to_s %>" name="skills" class="ui fluid dropdown">
              <option value="<%= order.status %>"><%= order.status %></option>
              <option value="已电话沟通">已电话沟通</option>
              <option value="正在进行中">正在进行中</option>
              <option value="已确认购买意向">已确认购买意向</option>
              <option value="未达成购买意向">未达成购买意向</option>
              <option value="未付款">未付款</option>
              <option value="已付款">已付款</option>
              <option value="已完成">已完成</option>
            </select>

              <script type="text/javascript">
        			$("#status<%=order.id.to_s %>").dropdown({
                  onChange: function(value, text, $selectedItem) {
                    $('.ui.load.segment').dimmer('show');
                    $.get('/system/orders/change_state/'+'<%=order.id.to_s %>', {state: value}, function(result){
                      $selectedItem.val(result);
                      $('.ui.load.segment').dimmer('hide');
                    });
                  }
        				});
        			</script>
          </td>
          <td style="word-break:break-all;"><%= order.user.mobile %></td>
          <td style="word-break:break-all;">
            <%= order.updated_at.strftime("%Y-%m-%d %H:%M:%S") %>
          </td>
          <td style="word-break:break-all;">
            当前金额：<%=order.amount %>万元
            <form class="ui form">

              <button data-amount="<%=order.amount%>"
                data-id="<%=order.id%>"
                id="changeAmount<%=order.id%>"
                type="button"
                class="ui tiny button"
                name="button">输入金额</button>
            </form>
            <script type="text/javascript">
              $("#changeAmount<%=order.id%>").click(function(){
                var id = $(this).attr("data-id");
                var amount = $(this).attr("data-amount");
                amount = $("#order_amount_input").val(amount.toString());
                $("#order_amount_input_hidden").val(id.toString());
                $("#changeAmountModal").modal({
                  onApprove : function() {
                      $('.ui.load.segment').dimmer('show');
                      $("#changeAmountForm").submit();
                  }

                }).modal("show");

              });
            </script>

          </td>

        </tr>
        <% end %>
        <% else %>
          <p>暂时没有数据</p>
        <% end %>
      </tbody>
      <tfoot>
        <tr><th colspan="4">
          <?php echo $pagination; ?>
        </th>
      </tr></tfoot>
    </table>
    </div>
  </div>
</div>
<script type="text/javascript">
$('.master.checkbox')
.checkbox({
  // check all children
  onChecked: function() {
    var
      $childCheckbox  = $('.child.checkbox');
    ;
    $childCheckbox.checkbox('check');
  },
  // uncheck all children
  onUnchecked: function() {
    var
      $childCheckbox  = $('.child.checkbox');
    ;
    $childCheckbox.checkbox('uncheck');
  }
})
;
var ids = '';
$('.child.checkbox').each(function(){
    var id = $(this).attr('orderid');
    $(this).checkbox({
      'onChecked': function(){
        ids = ids+ id+ "|";
        $("#orders_delete").val(ids);

      },
      'onUnchecked': function(){
        var regx = new RegExp(id+'\\|');
        ids = ids.replace(regx, '');

        $("#orders_delete").val(ids);
        if (ids=='') {
          $('.master.checkbox').checkbox('uncheck');
        }
      }
    });
});

$("#checkSeller").checkbox({
  onChecked: function() {
    console.log('checked');
    $('.ui.load.segment').dimmer('show');
    $('#loadMessage').html("正在保存更改......");
    var order_id = $("#checkSeller").attr("data-id");
    $.get('/system/orders/enable_seller/'+order_id, function(result){
      if (result == '1') {
        $('#loadMessage').html("更改成功！");
        $('.ui.load.segment').dimmer('hide');
      }
      if (result == '0') {
        $('#loadMessage').html("更改失败，请检查网络");
        $('.ui.load.segment').dimmer('hide');
      }
    });
  },
  onUnchecked: function() {
    console.log('unchecked');
  $('.ui.load.segment').dimmer('show');
  $('#loadMessage').html("正在保存更改......");
  var order_id = $("#checkSeller").attr("data-id");
  $.get('/system/orders/disable_seller/'+order_id, function(result){
    if (result == '1') {
      $('#loadMessage').html("更改成功！");
      $('.ui.load.segment').dimmer('hide');
    }
    if (result == '0') {
      $('#loadMessage').html("更改失败，请检查网络");
      $('.ui.load.segment').dimmer('hide');
    }
  });
  }
});
</script>
<div class="ui modal" id="changeAmountModal">
  <i class="close icon"></i>
<div class="header">
    输入交易额
</div>
<div class="content">
    <% form_tag url(:orders, :change_settlement_money), id: 'changeAmountForm', method: "post", class: "ui form" do %>

      <div class="field">
        <label for="pass_confirm">金额为(万元):</label>
        <input type="text" id="order_amount_input" name="amount"  value="" placeholder=''><br/>
        <input type="hidden" name="order_id" id="order_amount_input_hidden" value="" />
      </div>
    <% end %>
    <script type="text/javascript">

    </script>

</div>
<div class="actions">
  <div class="two fluid ui  buttons">
    <div class="ui cancel red basic  button">
      <i class="remove icon"></i>
      取消
    </div>
    <div class="ui ok green basic  button">
      <i class="checkmark icon"></i>
      保存
    </div>
  </div>
</div>
<div class="ui dimmer">
  <div class="content">
    <div class="center">
      <h2 class="ui inverted icon header">
        <i class="progress icon"></i>
        <span id="loadMessage">正在保存更改......<span>
      </h2>
    </div>
  </div>
</div>
</div>
